<script>
import { mapState } from 'vuex'
import showOrderMaps from '@/views/business/order/components/showOrderMaps/showOrderMaps.vue'

export default {
  name: 'orderDetail',
  components: {
    showOrderMaps
  },
  data() {
    return {
      titleInfo: { text: '订单轨迹' },
      formBase: {}
    }
  },
  methods: {
    /*
    *
    * 获取订单详情的回调函数
    *  */
    async fetchOrderDetail() {
      try {
        await this.$store.dispatch('orderStore/fetchOrderDetailAction', this.orderId)
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /*
    *
    * 获取货物列表的回调函数
    *  */
    async fetchCargoList() {
      try {
        await this.$store.dispatch('orderStore/fetchCargoListAction', this.orderId)
      } catch (error) {
        this.$message.error(error.message)
      }
    },

    /*
    *付款状态
    *  */
    moneysType(type) {
      const MAP = { 1: '未付', 2: '已付' }
      return MAP[type]
    },
    /*
    *支付类型
    * */
    moneyType(type) {
      const MAP = { 1: '预结', 2: '到付' }
      return MAP[type]
    }
  },
  mounted() {
    this.fetchOrderDetail()
    this.fetchCargoList()
  },
  computed: {
    orderId() {
      return this.$route.query.orderId
    },
    ...mapState('orderStore', ['cargoList', 'orderDetail'])
  }
}
</script>

<template>
  <div class="edit-order">
    <el-card shadow="never" class="order-info">
      <div slot="header" class="clearfix">
        <span>订单信息</span>
      </div>
      <el-row :gutter="20" justify="center">
        <el-col class="yjddrq" :span="6"><span>订单编号：</span><label>{{ orderDetail.id }}</label></el-col>
        <el-col class="yjddrq" :span="6"><span>运单编号：</span><label>{{ orderDetail.memberId }}</label></el-col>
        <el-col class="yjddrq" :span="6"><span>下单时间：</span><label>{{ orderDetail.createTime }}</label></el-col>
        <el-col class="yjddrq" :span="6"><span class="span1">订单状态：</span><label>{{ orderDetail.status }}</label></el-col>
        <el-col class="yjddrq" :span="6">
          <span> 到达日期：</span>
          <label>{{ orderDetail.estimatedArrivalTime }}</label>
        </el-col>
      </el-row>
    </el-card>
    <el-card shadow="never" class="basic-info">
      <div slot="header" class="clearfix">
        <span>基本信息</span>
      </div>
      <div class="block">
        <div class="line"></div>
        <div class="pake-info" style="margin-top: 10px">
          <img class="img-info1" src="../../../../../assets/fahuo.png" alt=""/>
          <span style="margin-left: 10px">发货方</span>
        </div>
        <div style="margin-top: 0; margin-left: 40px; display: flex">
          <div style="">
            <div class="demo-input-suffix base-info">发货方姓名：<span>{{ orderDetail.receiverName }}</span></div>
            <div class="demo-input-suffix base-info">
              发货方地址：
              <span>{{ orderDetail.receiverProvince && orderDetail.receiverProvince.name || '' }}</span>
              <span>{{ orderDetail.receiverCity && orderDetail.receiverCity.name || '' }}</span>
              <span>{{ orderDetail.receiverCounty && orderDetail.receiverCounty.name || '' }}</span>
            </div>
          </div>
          <div style="margin-left: 174px">
            <div class="demo-input-suffix base-info">发货方电话：<span>{{ orderDetail.receiverPhone }}</span></div>
            <div class="demo-input-suffix base-info">&nbsp;&nbsp;&nbsp;详细地址：<span>{{ orderDetail.receiverAddress }}</span>
            </div>
          </div>
        </div>
        <div class="pake-info" style="margin-top: 20px">
          <img class="img-info2" src="../../../../../assets/shouhuo.png" alt=""/>
          <span style="display: inline-block; margin-top: 6px;margin-left: 10px">收货方</span>
        </div>
        <div style="margin-top: 0; margin-left: 40px; display: flex">
          <div style="">
            <div class="demo-input-suffix base-info">收货方姓名：<span>{{ orderDetail.senderName }}</span></div>
            <div class="demo-input-suffix base-info">收货方地址：
              <span>{{ orderDetail.senderProvince && orderDetail.senderProvince.name || '' }}</span>
              <span>{{ orderDetail.senderCity && orderDetail.senderCity.name || '' }}</span>
              <span>{{ orderDetail.senderCounty && orderDetail.senderCounty.name || '' }}</span>
            </div>
          </div>
          <div style="margin-left: 174px">
            <div class="demo-input-suffix base-info">收货方电话：<span>{{ orderDetail.senderPhone }}</span></div>
            <div class="demo-input-suffix base-info">&nbsp;&nbsp;&nbsp;详细地址：<span>{{ orderDetail.senderAddress }}</span></div>
          </div>
        </div>
      </div>
    </el-card>
    <el-card shadow="never" class="pickup-info">
      <div slot="header" class="clearfix">
        <span>取件信息</span>
      </div>
      <el-row :gutter="20" style="margin-bottom: 10px">
        <el-col :span="6">
          <span class="demo-input-suffix base-info">所在网点：</span>
          <label class="demo-input-suffix base-info">{{ orderDetail.taskDispatch && orderDetail.taskDispatch.agency.name || '未知' }}</label>
        </el-col>
        <el-col :span="6">
          <span class="demo-input-suffix base-info">作业状态：</span>
          <label class="demo-input-suffix base-info">{{ orderDetail.taskDispatch && orderDetail.taskDispatch.status || '未知' }}</label>
        </el-col>
        <el-col :span="6">
          <span class="demo-input-suffix base-info">派送快递员：</span>
          <label class="demo-input-suffix base-info">{{ orderDetail.taskDispatch && orderDetail.taskDispatch.courier.name || '未知' }}</label>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <span class="demo-input-suffix base-info">快递员电话：</span>
          <label class="demo-input-suffix base-info">{{ orderDetail.taskDispatch && orderDetail.taskDispatch.courier.mobile || '未知' }}</label>
        </el-col>
        <el-col :span="6">
          <span class="demo-input-suffix base-info">预计派送时间：</span>
          <label class="demo-input-suffix base-info">{{ orderDetail.taskDispatch && orderDetail.taskDispatch.estimatedStartTime || '未知' }}</label>
        </el-col>
        <el-col :span="6">
          <span class="demo-input-suffix base-info">派件完成时间：</span>
          <label class="demo-input-suffix base-info">{{ orderDetail.taskDispatch && orderDetail.taskDispatch.estimatedEndTime || '未知' }}</label>
        </el-col>
      </el-row>
    </el-card>
    <el-card shadow="never" class="expense-info">
      <div slot="header" class="clearfix">
        <span>费用信息</span>
      </div>
      <el-row type="flex" class="row-bg" justify="space-around">
        <el-col :span="6">
          <span class="adi1">运费：</span>
          <span class="mani">12</span>
          <label>元</label>
        </el-col>
        <el-col :span="6">
          <span class="adi1">支付方式：</span>
          <label>{{ moneyType(orderDetail.paymentMethod) }}</label>
        </el-col>
        <el-col :span="6">
          <span class="adi1">付款状态：</span>
          <label>{{ moneysType(orderDetail.paymentStatus )}}</label>
        </el-col>
      </el-row>
    </el-card>
    <el-card shadow="never" class="cargo-info">
      <div slot="header" class="clearfix">
        <span>货物信息</span>
      </div>
      <el-table :data="orderDetail.orderCargoDTOS" style="width: 100%" stripe :header-cell-style="{ background: 'rgba(250,252,255,1)' }">
        <el-table-column label="序号" type="index" align="left" width="60"/>
        <el-table-column label="货品名称">
          <template slot-scope="scope">
            <span>{{ scope.row.name || '--' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="货品类型">
          <template slot-scope="scope"><span>{{ scope.row.goodsType === null ? '--' : scope.row.goodsType.name }}</span></template>
        </el-table-column>
        <el-table-column label="重量（千克）">
          <template slot-scope="scope">
            <span>{{ scope.row.totalWeight || '--' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="体积（立方）">
          <template slot-scope="scope">
            <span>{{ scope.row.totalVolume || '--' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <el-button type="text">编辑</el-button>
          <el-button type="text">删除</el-button>
        </el-table-column>
      </el-table>
    </el-card>
    <el-card shadow="never" class="map-info">
      <div slot="header" class="clearfix">
        <span>订单轨迹</span>
      </div>
      <showOrderMaps :title-info="titleInfo" :form-base="formBase"></showOrderMaps>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
@import "./index";

.edit-order {
  padding: 20px;

  .order-info {

  }

  .basic-info {
    margin-top: 10px;
  }

  .pickup-info {
    margin-top: 10px;
  }

  .expense-info {
    margin-top: 10px;
  }

  .cargo-info {
    margin-top: 10px;
  }

  .map-info {
    margin-top: 10px;
  }

  .yjddrq .sp {
    color: #000;
    font-size: 16px;
  }

  .span1 {
    color: #818693;
  }

  .el-col {
    color: #818693;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
  }

  label {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
  }

  .label {
    color: #818693;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
  }

  .adi1 {
    color: #000;
  }

  .mani {
    font-size: 20px;
    color: #ffb302;
  }
}
</style>
